<!-- src/views/ChangePasswordView.vue -->
<template>
  <div class="change-password">
    <div class="log">
      <img src="/img/个人中心/返回.png" @click="router.go(-1)">
      <span>更改密码</span>
    </div>
    <div class="form-container">
      <div class="form">
        <div class="input-group" v-for="(field, index) in fields" :key="index">
          <img :src="field.icon" class="icon">
          <input
              :type="field.type"
              :id="field.id"
              v-model="field.model"
              :placeholder="field.placeholder"
              required
          >
        </div>
        <div class="buttons">
          <div class="button confirm" @click="confirmChange">确认修改</div>
        </div>
      </div>
    </div>
    <TabBar></TabBar>
  </div>
</template>

<script setup>
import {ref, reactive} from "vue";
import TabBar from "@/components/TabBar.vue";
import {useRouter} from 'vue-router';

const router = useRouter();

const fields = reactive([
  {
    id: 'old-password',
    type: 'password',
    model: ref(''),
    placeholder: '请输入原密码',
    icon: '/img/个人中心/密码.png'
  },
  {
    id: 'new-password',
    type: 'password',
    model: ref(''),
    placeholder: '请输入新密码',
    icon: '/img/个人中心/密码.png'
  },
  {
    id: 'confirm-password',
    type: 'password',
    model: ref(''),
    placeholder: '请确认新密码',
    icon: '/img/个人中心/密码.png'
  }
]);

const oldPassword = fields[0].model;
const newPassword = fields[1].model;
const confirmPassword = fields[2].model;

const cancel = () => {
  router.go(-1);
};

const confirmChange = () => {
  if (newPassword.value !== confirmPassword.value) {
    alert("新密码和确认密码不一致");
    return;
  }
  // 实现更改密码逻辑
  alert("密码已更改");
  router.go(-1);
};
</script>

<style scoped>
.log {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.log img {
  width: 50px;
  margin-right: 20px;
}

.log span {
  font-size: 60px;
  color: #000000;
}

.change-password {
  padding: 30px 0; /* 添加一些垂直间距 */
}

.form-container {
  width: 100%;
  max-width: 500px;
  margin: 0 auto; /* 水平居中 */
  padding: 20px;
  box-sizing: border-box;
}

.form {
  width: 100%;
}

.input-group {
  position: relative;
  margin-bottom: 20px;
}

.input-group .icon {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  width: 40px;
}

.input-group input {
  width: 100%;
  height: 100px;
  line-height: 100px;
  padding-left: 60px; /* 确保输入文本不会与图标重叠 */
  padding-right: 20px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.buttons {
  text-align: center;
  margin-top: 50px;
}

.button {
  width: 200px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  background-color: #edc72d;
  cursor: pointer;
  border-radius: 20px;
}
</style>
